<template>
    <div @click="showBuyHash=false" style="background: #111214;color:#fff; width: 100%;min-height: 100vh;">
      <native :title="title"></native>
      <div class="buy-hash-detail">
        <div class="buy-hash-div">
          <img v-if="listData.isSpecial == 1" class="buy-hash-div-img" src="../assets/img/buy-img-discount@3x.png" alt="">
          <div style="text-align: center;height: 26px;line-height: 28px;">
            <img src="../assets/img/buy-icon-bag.svg" alt="">
            <span class="font-z1">GTZ算力包</span>
          </div>
          <div class="buy-hash-div-match">
            <span class="font-buy1">每份售价：</span>
            <span v-if="listData.isSpecial == 2">
              <span class="font-buyt2">{{listData.sellPrice}}</span>
              <span class="font-buy1">USDT + </span>
              <span class="font-buyt2">{{listData.pledgeGtz}} </span>
              <span class="font-buy1">GTZ</span>
            </span>
            <span v-if="listData.isSpecial == 1" class="font-buyt2">{{listData.sellPrice + listData.specialPledge}}</span>
            <!-- <span v-if="listData.isSpecial == 1" class="font-buyt1">{{listData.maintenanceFee+listData.sellPrice}}</span> -->
            <span v-if="listData.isSpecial == 1" class="font-buy1">USDT</span>
          </div>
          <div class="buy-hash-flex">
            <div class="font-buy3">矿机费</div>
            <div>
              <span class="font-buy4" style="margin-right: 4px;">{{listData.sellPrice}}USDT</span>
              <span class="font-buy4">x1台</span>
            </div>
          </div>
          <div class="buy-hash-flex">
            <div class="font-buy3">
              质押激活
              <img @click="activationCli" src="../assets/img/index-icon-doubt.svg" alt=""></div>
            <div>
              <span class="font-buy4" v-if="listData.isSpecial == 1" style="margin-right: 4px;">{{listData.specialPledge}}USDT</span>
              <span class="font-buy4" v-else style="margin-right: 4px;">{{listData.pledgeGtz}}GTZ</span>
              <span class="font-buy4">x1台</span>
            </div>
          </div>
          <div class="buy-hash-flex">
            <div class="font-buy8">【赠】首年维护费</div>
            <div>
              <span class="font-buy7">79USDT x1台</span>
            </div>
          </div>
        </div>
        <div class="buy-hash-box" style="margin-top: 10px;">
          <div class="buy-hash-flex" style="border-bottom: 1px solid rgba(255, 255, 255, 0.1);padding: 20px 0px;margin-top: 0px;">
            <div class="font-z1">发币方式</div>
            <div class="font-buy5">每日结算，立即发放至本人平台账户</div>
          </div>
          <div class="buy-hash-flex" style="padding: 20px 0px;margin-top: 0px;">
            <div class="font-z1">开挖时间</div>
            <div class="font-buy5">创世成功后即时开挖</div>
          </div>
        </div>
        <div>
          <div class="buy-hash-sel">
            <span :class="selNum == 0?'font-sel':''" @click="selCli(0)">算力说明</span>
            <span :class="selNum == 1?'font-sel':''" @click="selCli(1)">合约说明</span>
            <span :class="selNum == 2?'font-sel':''" @click="selCli(2)">风险提示</span>
          </div>
          <div v-show="selNum == 0" class="font-buy6">
            剧本游戏是当下年轻人最火热的消费娱乐方式，主打沉浸式体验和面对面互动社交。2019年线下消费市场达50多亿，实体门店增速达900%，单店回本周期仅6个月。
            GTZ以门店SAAS+区块链、正版剧本溯源+区块链、门店财务管理+区块链、赋能线下实体门店，解决信息交换和价值传递等问题。
            项目团队专注于技术开发与商业场景落地，项目净利润将用于代币回购与销毁，有足够价值支撑。
          </div>
          <div v-show="selNum == 1" class="font-buy6">
            GTZ总量210万枚，每10分钟产生一个数据区块，并可获得5枚GTZ奖励，区块高度每达到21000时，单个区块奖励减半。GTZ代币全部由挖矿产出，无私募，无预挖；数据均可通过去中心化合约地址查看，实现真正公平透明的分配机制。
          </div>
          <div v-show="selNum == 2" class="font-buy6">
            请根据自身情况选择算力购买，数字货币价格涨跌，全网算力变化等因素会造成您持有的算力收益产生波动。
          </div>
        </div>
        <div class="buy-hash-btn" @click.stop="buyNumber">
          <img style="vertical-align: middle;margin-top: -3px;" src="../assets/img/buy-icon-mine.svg" alt="">
          <span>立即购买</span>
        </div>
      </div>
      <div class="buy-hash-bottom" v-show="showBuyHash" @click.stop>
        <div style="font-size: 18px;text-align: center;margin-top: 5px;">购买算力包</div>
        <img @click="showBuyHash=false" style="position: absolute;left: 15px;top:20px;" src="../assets/img/close.svg" alt="">
        <div class="buy-hash-number">
          <div class="font1">购买数量</div>
          <div>
            <span class="font2" @click="numberCli(0)">-</span>
            <span class="font3">{{hashNumber}}</span>
            <span class="font2" @click="numberCli(1)">+</span>
          </div>
        </div>
        <div class="buy-hash-number">
          <div class="font1">订单总计</div>
          <div>
            <span class="font4">{{hashPrice}}</span>
            <span class="font5">USDT</span>
          </div>
        </div>
        <div class="buy-hash-number">
          <div class="font1">质押总计</div>
          <div>
            <span class="font4" v-if="listData.isSpecial == 1">{{listData.specialPledge}}</span>
            <span class="font5" v-if="listData.isSpecial == 1">USDT</span>
            <span class="font4" v-if="listData.isSpecial == 2">{{listData.pledgeGtz}}</span>
            <span class="font5" v-if="listData.isSpecial == 2">GTZ</span>
          </div>
        </div>
        <div class="buy-hash-pay" @click="payOk">确认支付</div>
      </div>
      <transactionPassword v-if="showNumKey" @transactNum="transactNum" :usdtNum="hashPriceVal" @returnFalse="returnFalse"></transactionPassword>
      <usdtNo @returnPage="returnPage" :current="current" v-if="showUsdtNo"></usdtNo>
      <div class="usdtno-home" v-show="showActivation">
        <div class="usdtno-box">
          <div style="font-size: 18px;text-align: center;">质押激活</div>
          <div class="usdtno-box-font">{{activation}}</div>
        </div>
        <img @click="showActivation = false" src="../assets/img/layer-close.svg" alt="">
      </div>
    </div>

  </template>

  <script>
  import { Toast } from 'vant'
  import native from './public/native.vue'
  import usdtNo from './public/usdtNo.vue'
  import transactionPassword from './public/transactionPassword.vue'  
  export default {
    name: 'buyHash',
    data () {
      return {
        title:'算力包详情',
        selNum:0,
        showNumKey:false,
        showBuyHash:false,
        hashNumber:1,
        hashPrice:0,
        hashPriceVal:'',
        showUsdtNo:false,
        listData:{
          sellPrice: 0,
          maintenanceFee: 0,
          validPeriod: 0,
          specialPrice: 0,
          isSpecial: 1,
          usdtBalance:0,
          computerPower:0
        },
        activation: '创世特惠阶段，由 generationz 基金会代收 50 USDT 激活矿机； 创世挖矿开启后，每台矿机需要质押价值150U的等值 GTZ 激活矿机。',
        showActivation: false,
        current:''
      }
    },
    components:{
      native,
      transactionPassword,
      usdtNo
    },
    watch: {
      hashNumber(val){
        this.hashPrice = val*this.listData.sellPrice;
        if(this.listData.isSpecial == 1){
          this.hashPriceVal = this.hashNumber*this.listData.sellPrice+this.hashNumber*this.listData.specialPledge + 'USDT';
        }
        if(this.listData.isSpecial == 2){
          this.hashPriceVal = this.hashNumber*this.listData.sellPrice + 'USDT' + this.hashNumber*this.listData.pledgeGtz + 'GTZ'; 
        }
      }
    },
    computed: {

    },
    mounted() {
        this.initData();
    },
    methods: {
      initData(){
        this.$http.get(this.utils.config+"/gz/machine/machine_detail_onlyone").then((data)=>{
          if(data.data.success){
              this.listData = data.data.data;
              localStorage.setItem('computerPower',this.listData.computerPower)
          }
        })
      },
      activationCli(){
        this.showActivation = true;
        if(this.listData.isSpecial == 1){
          this.activation = "创世特惠阶段，由 generationz 基金会代收 50 USDT 激活矿机； 创世挖矿开启后，每台矿机需要质押价值150U的等值 GTZ 激活矿机。";
        }else{
          this.activation = "每台矿机需要质押价值150U的等值 GTZ 激活矿机。";
        }
      },
      jumpChong(){
        this.$router.push('/recharge/USDT')
      },
      selCli(num){
        this.selNum = num;
      },
      numberCli(num){
        if(num == 0 && this.hashNumber>1){
          this.hashNumber--;
        }
        if(num == 1){
          this.hashNumber++;
        }
      },
      returnPage(data){
        this.showUsdtNo = data;
      },
      returnFalse(data){
        this.showNumKey = data;
      },
      buyNumber(){
        var that = this;
        this.$http.get(this.utils.config+"/gz/member/person_center").then((data)=>{
          if(data.data.success){
            if(data.data.data.exchangePwd == 'null' || data.data.data.exchangePwd == null){
              Toast('请先设置交易密码！');
              this.$router.push('/safetyCenter');
            }
          }
        })
        if(that.listData.usdtBalance<that.listData.sellPrice){  
          this.current = 'USDT';        
          that.showUsdtNo = true;
          return
        }
        if(that.listData.isSpecial == 2 && that.listData.gtzBalance<that.listData.pledgeGtz){
          this.current = 'GTZ';        
          that.showUsdtNo = true;
          return
        }
        that.showBuyHash = true;
        this.hashPrice = this.hashNumber*this.listData.sellPrice;
        if(that.listData.isSpecial == 1){
          that.hashPriceVal = that.hashNumber*that.listData.sellPrice+this.hashNumber*this.listData.specialPledge + 'USDT';
        }
        if(that.listData.isSpecial == 2){
          that.hashPriceVal = that.hashNumber*that.listData.sellPrice + 'USDT' + that.hashNumber*that.listData.pledgeGtz + 'GTZ'; 
        }
      },
      payOk(){
        this.showNumKey = true;
      },
      transactNum(data){
        var list={
          machineId:this.listData.id,
          buyNum:this.hashNumber,
          exchangePwd:this.$md5(data)
        }
        this.$http.post(this.utils.config+"/gz/machine/buy_machine",list).then((data)=>{
          if(data.data.success){
            this.$router.push('/payment');
            localStorage.setItem('hashNumber',this.hashNumber);
            localStorage.setItem('hashPrice',this.hashPriceVal);
            // this.showNumKey = false;
            // this.showUsdtNo = false;
            // this.showBuyHash = false;
          }else{
            Toast(data.data.msg);
          }
        })
      }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>

.usdtno-home{
      width: 100%;
      height: 100vh;
      position: fixed;
      top:0px;
      left:0px;
      background: rgba(0, 0, 0, 0.4);
      padding: 260px 48px 0px 48px;
      text-align: center;
    }
    .usdtno-box{
      width: 100%;
      height: 190px;
      background-color: #2F3036;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 20px;
      .usdtno-box-font{
        color: rgba(255, 255, 255, .6);
        margin-top: 20px;
        line-height:26px;
        text-align:left;
      }
    }

    .buy-hash-pay{
      width: calc(100% - 30px);
      height: 56px;
      line-height: 56px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      background-color: #6E59FF;
      border-radius: 6px;
      position: absolute;
      bottom: 29px;
    }
    .buy-hash-number{
      margin-top: 29px;
      display: flex;
      justify-content: space-between;
      .font1{
        font-size: 16px;
        color:rgba(255, 255, 255, .8);
      }
      .font2{
        font-size: 24px;
        color:rgba(255, 255, 255, .6);
      }
      .font3{
        display: inline-block;
        width: 46px;
        text-align: center;
        font-size: 20px;
        margin: 0px 5px;
        font-family: axis;
      }
      .font4{
        font-size: 24px;
        font-family: axis;
        color: #6E59FF;
      }
      .font5{
        font-size: 16x;
        font-family: axis;
        color:rgba(255, 255, 255, .5);
      }
    }
    .buy-hash-bottom{
      width: 100%;
      height: 417px;
      position: fixed;
      bottom: 0px;
      background-color: #2F3036;
      border-radius: 14px 14px 0px 0px;
      padding: 20px 15px;
    }
    .buy-hash-btn{
      width: calc(100% - 30px);
      height: 56px;
      line-height: 56px;
      position: absolute;
      font-size: 16px;
      font-weight: bold;
      bottom: 20px;
      background-color: #6E59FF;
      border-radius: 6px;
      text-align: center;
    }
    .font-sel{
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
    .buy-hash-sel{
      margin: 25px 0px 18px 0px;
      font-size: 16px;
      color:rgba(255, 255, 255, .4);
      span{
        margin-right: 30px;
      }
    }
    .buy-hash-box{
      width: 100%;
      padding: 5px 15px;
      background-color: #1E1F24;
      border-radius: 5px;
    }
    .buy-hash-flex{
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }
    .font-buyt1{
      font-size: 20px;
      font-family: axis;
      color: rgba(248, 248, 248, .6);
      text-decoration-line: line-through;
      margin-right: 2px;
    }
    .font-buyt2{
      font-size: 32px;
      font-family: axis;
      color: #6E59FF;
      margin-right: 3px;
    }
    .font-buy8{
      font-size: 12px;
      color: rgba(254, 166, 70, .8);
      line-height: 17px;
    }
    .font-buy7{
      font-size: 12px;
      color: rgba(254, 166, 70, .6);
      line-height: 17px;
    }
    .font-buy6{
      font-size: 14px;
      color: rgba(255, 255, 255, .4);
      line-height: 1.5;
    }
    .font-buy5{
      font-size: 14px;
      color: rgba(255, 255, 255, .4);
    }
    .font-buy4{
      font-size: 12px;
      color: rgba(255, 255, 255, .6);
    }
    .font-buy3{
      font-size: 12px;
      color: rgba(255, 255, 255, .8);
    }
    .font-buy2{
      font-size: 32px;
      color: #F8F8F8;
      margin-right: 10px;
    }
    .font-buy1{
      font-size: 14px;
      color: rgba(255, 255, 255, .8);
      margin-right: 10px;
    }
    .buy-hash-detail{
      width: 100%;
      padding:20px 15px;
    }
    .buy-hash-div{
      width: 100%;
      height: 217px;
      position: relative;
      padding: 15px;
      background-color: #1E1F24;
      border-radius: 5px;
    }
    .buy-hash-div-img{
      width: 91px;
      height: 75px;
      position: absolute;
      right: 0px;
      top:0px
    }
    .buy-hash-div-match{
      text-align: center;
      padding: 15px 0px;
      height: 68px;
      line-height: 38px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 10px;
    }
  </style>
